<template>
  <Dialog :title="dialogTitle" v-model="dialogVisible" width="50%">
    <el-descriptions :column="2" border>
      <el-descriptions-item label="合同类别">
        <dict-tag :type="DICT_TYPE.OA_EMPLOYEE_CONTRACT_CATEGORY" :value="detailData.contractCategory" />
      </el-descriptions-item>
      <el-descriptions-item label="合同类型">
        <dict-tag :type="DICT_TYPE.OA_EMPLOYEE_CONTRACT_TYPE" :value="detailData.contractType" />
      </el-descriptions-item>
      <el-descriptions-item label="员工">
        {{ detailData.userName }}
      </el-descriptions-item>
      <el-descriptions-item label="合同名称">
        {{ detailData.contractName }}
      </el-descriptions-item>
      <!-- <el-descriptions-item label="合同编码">
        {{ detailData.contractCode }}
      </el-descriptions-item> -->
      <el-descriptions-item label="签约公司">
        {{ detailData.signingCompany }}
      </el-descriptions-item>
      <el-descriptions-item label="签订日期" prop="signingDate">
        {{ formatDate(detailData.signingDate, 'YYYY-MM-DD') }}
      </el-descriptions-item>
      <el-descriptions-item label="合同开始时间" prop="effectiveStartDate">
        {{ formatDate(detailData.effectiveStartDate, 'YYYY-MM-DD') }}
      </el-descriptions-item>
      <el-descriptions-item label="合同结束时间" prop="effectiveEndDate">
        {{ formatDate(detailData.effectiveEndDate, 'YYYY-MM-DD') }}
      </el-descriptions-item>
      <el-descriptions-item label="合同属性" prop="contractAttribute">
        <dict-tag :type="DICT_TYPE.OA_CONTRACT_ATTRIBUTE" :value="detailData.contractAttribute" />
      </el-descriptions-item>
      <el-descriptions-item label="试用期月数" v-if="detailData.contractCategory == 1">
        {{ detailData.probationMonths }}
      </el-descriptions-item>
      <el-descriptions-item label="试用结束时间" prop="probationEndDate" v-if="detailData.contractCategory == 1">
        {{ formatDate(detailData.probationEndDate, 'YYYY-MM-DD') }}
      </el-descriptions-item>
      <el-descriptions-item label="试用工资(元)" v-if="detailData.contractCategory == 1">
        {{ detailData.probationSalary }}
      </el-descriptions-item>
      <el-descriptions-item label="工资费用(元)" v-if="detailData.contractCategory != 4">
        {{ detailData.regularSalary }}
      </el-descriptions-item>
      <el-descriptions-item label="合同状态" :span="1">
        <dict-tag :type="DICT_TYPE.OA_CONTRACT_STATUS" :value="detailData.contractStatus" />&nbsp;&nbsp;
        <el-button type="danger" @click="cancel(detailData.id, 2)" v-if="detailData.contractStatus == 1" v-hasPermi="['oa:employee-contracts:update']">
          解除合同
        </el-button>
        <el-button type="primary" @click="cancel(detailData.id, 1)" v-if="detailData.contractStatus == 2" v-hasPermi="['bpm:process-instance:query']">
          恢复合同
        </el-button>
      </el-descriptions-item>
      <el-descriptions-item label="续签状态">
        <div v-if="detailData.renewalStatus == 0">
          <dict-tag :type="DICT_TYPE.OA_EMPLOYEE_RENEWAL_STATUS" :value="detailData.renewalStatus" />&nbsp;&nbsp;
          <el-button type="primary" @click="openForm('续签', detailData.id)" v-hasPermi="['oa:employee-contracts:create']">
            新增续签合同
          </el-button>
        </div>
        <div v-if="detailData.renewalStatus == 1">
          <dict-tag :type="DICT_TYPE.OA_EMPLOYEE_RENEWAL_STATUS" style="color: red;"
            :value="detailData.renewalStatus" />&nbsp;&nbsp;
          <el-text class="mx-1">续签日期：{{ formatDate(detailData.renewalDate, 'YYYY-MM-DD') }}</el-text>
          <!-- <el-button
            type="primary"
            @click="openForm('续签',detailData.id)"
          >
            续签合同详情
          </el-button> -->
        </div>
      </el-descriptions-item>
      <el-descriptions-item label="变更状态">
        <div v-if="detailData.modificationStatus == 0">
          <dict-tag :type="DICT_TYPE.OA_EMPLOYEE_MODIFICATION_STATUS"
            :value="detailData.modificationStatus" />&nbsp;&nbsp;

          <el-button type="primary" @click="openForm('变更', detailData.id)" v-hasPermi="['oa:employee-contracts:create']">
            新增变更合同
          </el-button>
        </div>
        <div v-if="detailData.modificationStatus == 1">
          <dict-tag :type="DICT_TYPE.OA_EMPLOYEE_MODIFICATION_STATUS" style="color: red;"
            :value="detailData.modificationStatus" />&nbsp;&nbsp;
          <el-text class="mx-1">变更日期：{{ formatDate(detailData.modificationDate, 'YYYY-MM-DD') }}</el-text>

        </div>

      </el-descriptions-item>
    </el-descriptions>
  </Dialog>

  <EmployeeContractsForm ref="formRef" @success="employeeContractsFormSuccess" />
</template>
<script lang="ts" setup>
import { DICT_TYPE } from '@/utils/dict'
import { formatDate } from '@/utils/formatTime'
import { propTypes } from '@/utils/propTypes'
import { EmployeeContractsApi, EmployeeContractsVO } from '@/api/oa/employeecontracts'
import EmployeeContractsForm from './EmployeeContractsForm.vue'
import { status } from 'nprogress'

defineOptions({ name: 'EmployeeContractsDetail' })
const getList = inject('getList')
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗

const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('') // 弹窗的标题

const { query } = useRoute() // 查询参数

const props = defineProps({
  id: propTypes.number.def(undefined)
})
const detailLoading = ref(false) // 表单的加载中
const detailData = ref<any>({}) // 详情数据
const queryId = query.id as unknown as number // 从 URL 传递过来的 id 编号

/** 获得数据 */
const getInfo = async (type: string, id: number) => {
  detailLoading.value = true
  dialogVisible.value = true
  dialogTitle.value = t('查看详情')
  console.log(id)
  try {
    detailData.value = await EmployeeContractsApi.getEmployeeContracts(id)
  } finally {
    detailLoading.value = false
  }

  console.log(detailData.value)
}
defineExpose({ getInfo }) // 提供 open 方法，用于打开弹窗

/** 解除合同 */
const cancel = async (id: number, status: number) => {
  await EmployeeContractsApi.cancelEmployeeContracts(id, status)
  getInfo('cancel', id)
  message.success('解除合同成功')
}

/** 添加/修改操作 */
const formRef = ref()
const openForm = (type: string, id?: number) => {
  formRef.value.open(type, id)
}
const employeeContractsFormSuccess = () => {
  getInfo('formSuccess', detailData.value.id) // 刷新详情数据
  getList() // 刷新列表数据
}
/** 初始化 **/
// onMounted(() => {
//   getInfo()
// })
</script>
